<template>
	<view>
		<uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="外出申请" left-icon="left"   @clickLeft="backFn"  ></uni-nav-bar>
	     <view class="tabs">
	     	  <u-tabs :current="index" :list="list1" @click="clickTabs" :itemStyle="{height:'45px',width:'30%'}" lineWidth="50px"></u-tabs>
	     </view>
		 <!-- 新增表单 -->
		 <view v-show="showTabs==0" class="form">
		 	<u--form class="form" labelPosition="left" labelWidth="120px" :model="form" :rules="rules" ref="form">
				
		 	    <u-form-item @click="openTime(1)" class="item" labelPosition="top" leftIcon="*" leftIconStyle="color:red;"  label="开始时间" prop="outgoingStartTime" borderBottom ref="item1">
		 	       
					<u--input disabled disabledColor="#fff" v-model="form.outgoingStartTime" border="none"
		 	            placeholder="选择开始时间"></u--input>
		 	        <u-icon slot="right" name="arrow-right"></u-icon>
		 	    </u-form-item>
				<u-form-item @click="openTime(2)" class="item" labelPosition="top" leftIcon="*" leftIconStyle="color:red;"  label="结束时间" prop="outgoingEndTime" borderBottom ref="item1">
				    <u--input disabled disabledColor="#fff" v-model="form.outgoingEndTime" border="none"
				        placeholder="结束时间"></u--input>
				    <u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item class="item" labelPosition="top" leftIcon="*" leftIconStyle="color:red;"  label="时长" prop="outgoingTotalTime" borderBottom ref="item1">
				    <u--input disabled disabledColor="#fff" v-model="form.outgoingTotalTime" border="none"
				        placeholder="时长/小时"></u--input>
				    <u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item class="item" labelPosition="top" leftIcon="*" leftIconStyle="color:red;"  label="申请时间" prop="applyTime" borderBottom ref="item1">
				    <u--input disabled disabledColor="#fff" v-model="form.applyTime" border="none"
				        placeholder="申请时间"></u--input>
				    <u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item class="item" labelPosition="top" leftIcon="*" leftIconStyle="color:red;"  label="外出事由" prop="reason" borderBottom ref="item1">
				    <u--textarea   v-model="form.reason" border="none"
				        placeholder="外出事由"></u--textarea >
				   
				</u-form-item>
				
				</u--form>
				<!-- 流程 -->
				
				<!-- 底部 -->
				<view class="form_bottom">
					<view class="form_bottom_left" @click="addForm">
						<uni-icons color="#606266" custom-prefix="iconfont" type="icon-kaoqindaqia" size="20"  class="iconBox" style="font-size: 20px;background-color: #fff;"></uni-icons>
						<text style="font-size: 12px;padding-top: 3px;">存草稿</text>
					</view>
					<view class="form_bottom_right">
						<u-button @click="submitFn" class="button" type="primary">提交</u-button>
					</view>
				</view>
		 </view>
		 <!-- c查看表表 -->
		 <view v-show="showTabs==1" class="">
		 	查看列表
		 </view>
		 <!-- 查看数据 -->
		 <view v-show="showTabs==2" class="lists">
			
		 	<view class="list_item" v-for="(item,index) in list" :key="index" @click="tooutgoingInfo(item)">
		 		<view class="top">
		 			<view class="left">{{item.applyUserName}}提交的外出 </view>
					<view class="right">{{item.applyTime}}</view>
		 		</view>
				<view class="body">
					<view class=""><span>开始时间:</span> {{item.outgoingStartTime}}</view>
					<view class=""><span>结束时间:</span>{{item.outgoingEndTime}}</view>
					<view class=""><span>时长:</span>{{item.outgoingTotalTime}}</view>
				</view>
				<view class="bottom">
					<view class="left">
						<view class="left_item">
						 <u-avatar font-size="8" bg-color="#3286ed" shape="square" size="25" :text="item.applyUserName.substr(1,2)"   ></u-avatar>
							<view  class="text"> 由{{item.applyUserName}}提交</view>
						</view>
					</view>
					<view class="right">
						<span>审批通过</span>
					</view>
				</view>
		 	</view>
		 </view>
		   <u-datetime-picker @confirm="confirmTime" :show="show" v-model="value1" mode="datetime" @cancel="show=false"></u-datetime-picker>
            <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {listOutgoingApproval,addOutgoingApproval} from '@/api/OA/outgoing.js'
	export default {
		data() {
			return {
				list1:[
					{name:'发起提交'},
					{name:'查看报表'},
					{name:'查看数据'},
				],
				index:0,
				form:{
					outgoingStartTime:'',
					outgoingEndTime:'',
					applyTime:'',
					reason:'',
					
				},
				rules:{
					'outgoingStartTime':{ required: true,message: '请选择开始时间', trigger: ['blur', 'change']},
				    'outgoingEndTime':{ required: true,message: '请选择结束时间', trigger: ['blur', 'change']},
					'outgoingTotalTime':{ required: true,message: '请输入时长', trigger: ['blur', 'change']},
					'reason':{ required: true,message: '请填写外出事由', trigger: ['blur', 'change']},
				},
				value1:Number(new Date()),
				show:false,
				num:0,
				outgoingStartTime:null,
				outgoingEndTime:null,
				showTabs:0,//tab切换
				list:[],//数据list
			};
		},
		created() {
			this.form.applyTime=this.shijianc(new Date())
			this.form.applyUserId=this.$store.getters.userid
			this.form.applyUserName=this.$store.getters.name
			this.getList()
		},
		methods:{
			// tabs切换
			clickTabs(val){
				console.log(val);
				this.index=val.index
				this.showTabs=val.index
				
			},
			// 存草稿
			addForm(){
				 
				this.$refs.form.validate().then(res=>{
					 
					this.form.outgoingTotalTime=Number(this.form.outgoingTotalTime)
					if(res){
						if(this.form.id){
							var that=this
							updateOutgoingApproval(this.form).then(res=>{
								if(res){
									
									this.$refs.uToast.show({
										type:'success',
										message:'修改成功',
										complete(){
											that.getList()
										}
										
									})
								}
							}) 
						}else{
						var that=this
							addOutgoingApproval(this.form).then(res=>{
								if(res){
									this.$refs.uToast.show({
										type:'success',
										message:'新增成功',
										complete(){
											that.getList()
											that.showTabs=2
											that.index=2
										}
									})
								}
							})
						}
						
					} 
				})
				
			},
			submitFn(){
				
			},
			// 获取外出数据
			async getList(){
				let res= await listOutgoingApproval({applyUserId:this.form.applyUserId})
				this.list=res.rows
			},
			// 跳转详情页面
			tooutgoingInfo(val){
				uni.navigateTo({
					url:"/pages/OAPage/outgoing/outgoingInfo/outgoingInfo?id="+val.id
				})
			},
			
			// 时间选择
			openTime(val){
				this.num=val
				this.show=true
			},
			confirmTime(val){
				if(this.num==1){
				this.form.outgoingStartTime=this.shijianc(val.value)
				this.outgoingStartTime=val.value
				this.show=false
				}else if(this.num==2){
					this.form.outgoingEndTime=this.shijianc(val.value)
					this.outgoingEndTime=val.value
					this.show=false
					this.form.outgoingTotalTime=((this.outgoingEndTime-this.outgoingStartTime)/3600000).toFixed(2)
				}
				
			},
			// 时间格式转换
			  shijianc(time) {
			      let date = new Date(time)
			      let Y = date.getFullYear() + '-'
			      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
			      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
			      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
			      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
			      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
			      return Y + M + D + h + m + s
			    },
			backFn(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="scss">
  .tabs{
	  margin-top: 8px;
	  background-color: #fff;
  }
  .form{
	  margin-top: 10px;
	
	 
	  .item{
		   padding-left: 10px;
		    padding-right: 10px;
		   background-color: #fff;
		  margin-bottom: 8px;
	  }
	  .form_bottom{
		  background-color: #fff;
		  position: fixed;
		  bottom: 0;
		  width: 100%;
		  padding-bottom: 20px;
		  padding-top: 15px;
		  display: flex;
		  padding-left:5px ;
		  .form_bottom_left{
			   display: flex;
			   justify-content: center;
			   flex-direction: column;
			   align-items:center;
		  }
		  .form_bottom_right{
			  display: flex;
			  justify-content: center;
			  flex-direction: column;
			  align-items:center;
			  width: 80%;
			  padding-left: 10px;
			  .button{
				  border-radius: 10px;
			  }
		  }
		  
	  }
	  
  }
  .lists{
  		  .list_item{
  			  background-color: #fff;
			  padding: 10px;
			  margin-top: 10px;
  			  .top{
  				  display: flex;
  				  justify-content: space-between;
				  
				  .left{
					  font-size: 16px;
				  }
				  .right{
					  font-size: 12px;
					  color: #bec0c2;
				  }
  			  }
			  .body{
				  font-size: 14px;
				  color: #bec0c2;
				  padding: 7px 0px;
			  }
			  .bottom{
				 display: flex;
				 justify-content: space-between;
				 .left{
					 font-size: 16px;
					 .left_item{
						 display: flex;
						 .text{
							 padding: 5px;
							 font-size: 12px;
						 }
					 }
				 }
				  .right{
					  font-size: 12px;
					  color: #1dcf67;
				  }
			  }
  		  }
  }
</style>
